<template>
	<view>
		<picker @columnchange="oncolumnchange" @change="bindPickerChange" mode="multiSelector" :value="index" :range="array">
			<view class="uni-input" :class="value == '请选择上门时间'?'':'color'">{{ value }}</view>
		</picker>
	</view>
</template>

<script>
	export default {
		name: "time-range-picker",
		props: {
			value: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				index: [0, 0],
				dateOptions: [],
				options: ["08:00-09:00", "09:00-10:00", "10:00-11:00", "11:00-12:00", "13:00-14:00", "14:00-15:00", "15:00-16:00",
					"16:00-17:00"
				],
				array: [],
				selectedDate: '',
				selectedTime: '',

				today: new Date(),
				tomorrow: new Date(new Date().setDate(new Date().getDate() + 1)),
				theDayNextTomorrow: new Date(new Date().setDate(new Date().getDate() + 2)),

			};
		},
		watch: {
			value(newVal) {
				// console.log(newVal)
				if (newVal) {
					let date, time;
					[date, time] = [newVal.split(" ")[0], newVal.split(" ")[1] || undefined]

					this.setValue(date, time)
				} else {

				}
			}
		},
		created() {
			this.bindDate();
			this.bindTime();
		},
		methods: {
			bindPickerChange(e) {
				// console.log(e);
				// let date = this.array[0][e.detail.value[0]]
				let result = this.dateOptions.find(x => x.lable == this.array[0][e.detail.value[0]]).value + ' ' + this.array[1][e.detail
					.value[1]
				]
				// console.log('result', result)
				this.$emit('input', result)
			},
			oncolumnchange(e) {
				console.log(e)
				//选择了第一列
				if (e.detail.column == 0) {
					//第1列，第几行选择是 今天 就重新获取时间
					// if (this.array[0][e.detail.value] == '今天') {
					// 	console.log(this.array[0][e.detail.value])
					// 	this.bindTime()
					// }else{
					// 	this.bindTime()
					// }
					this.selectedDate =this.dateOptions.find( x=>x.lable == this.array[0][e.detail.value]).value
					console.log(this.selectedDate)
					this.bindTime()
				}
			},
			bindDate() {
				this.selectedDate = this.$funs.toLocalDate(this.today)
				this.dateOptions = [{
					lable: "今天",
					value: this.$funs.toLocalDate(this.today),
				}, {
					lable: "明天",
					value: this.$funs.toLocalDate(this.tomorrow),
				}, {
					lable: "后天",
					value: this.$funs.toLocalDate(this.theDayNextTomorrow),
				},
			];
			this.array[0] = this.dateOptions.map(x => x.lable)
			// console.log(this.array[0])
		},
		bindTime() {
			let timeOptions = []
	
			if (this.selectedDate == this.$funs.toLocalDate(this.today)) {
				let currentHour = new Date().getHours()
				currentHour = currentHour >= 10 ? currentHour : '0' + currentHour
				timeOptions = this.options.filter((x) => {
					console.log(x,currentHour)
					return x > (currentHour+'')
				});
				if (timeOptions.length == 0) {
					this.array[0] = this.array[0].filter(x => x != '今天')
					timeOptions = this.options;
				}
			} else {
				timeOptions = this.options;
			}
			if (timeOptions.length > 0 && timeOptions.indexOf("任意时间") < 0) {
				timeOptions.unshift("任意时间");
			}
			this.array[1] = timeOptions
		},

		setValue(date, time) {
			//今明后转日期
			// console.log(date,this.dateOptions)
			let d = (this.dateOptions.find(x => x.value == date)||{lable:''}).lable
			// console.log(d, this.dateOptions)
			this.index[0] = (this.array[0].findIndex(x => x == d) > -1) || 0
			this.index[1] = (this.array[1].findIndex(x => x == time) > -1) || 0
			
			// console.log(this.array)
		}
	},
	};
</script>

<style lang="less" scoped>
	.uni-input {
		color: #777;
	}
	.color {
		color: #333!important;
	}
</style>
